import React from 'react'
import PropTypes from 'prop-types'
import { Tag, Card, Icon, Avatar, Popover } from 'antd'

const { Meta } = Card

const UserLink = ({ data, style }) => {
  const { username, role, avatar } = data ? data : {}
  const content = (
    <Card
      style={{
        marginLeft: '-20px',
        marginTop: '-12px',
        marginRight: '-20px',
        marginBottom: '-12px',
      }}
      // cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
      actions={[
        <Icon type="user-add" />,
        <Icon type="message" />,
        <Icon type="qrcode" />,
      ]}
    >
      <Meta
        avatar={<Avatar src={avatar} />}
        title={username}
        description={role}
      />
    </Card>
  )
  return (
    <Popover placement="bottomRight" content={content} arrowPointAtCenter>
      {/* <Button type="primary">Hover me</Button> */}
      <Tag style={{ ...style }} color={role == '管理员' ? 'gold' : 'blue'}>
        {role == '管理员' ? (
          <Icon type="idcard" theme="filled" />
        ) : (
          <Icon type="user" />
        )}{' '}
        &nbsp;{username}
      </Tag>
    </Popover>
  )
}

UserLink.propTypes = {
  data: PropTypes.object,
}

export default UserLink
